<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>易购商城运营商管理后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="media/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="media/css/login.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="media/css/verify.css">
    <script type="text/javascript" src="media/js/jquery.min.js"></script>

    <!--下面一个开放的JS中有一个方法可以获取当前IP地址-->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">

        var ip=""; //所属的IP
        var cityAndAddress=""; //登录的地区
        $(function () {
            //获取IP,页面加载的时候自动执行
            ip=returnCitySN["cip"];
            $.ajax({
                url: 'http://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',
                type: 'POST',
                dataType: 'jsonp',
                success:function(data) {
                    //获取城市
                    cityAndAddress=data.content.address_detail.province + "," + data.content.address_detail.city;
                    //alert("IP:"+ip);
                    //alert("cityAndAddress:"+cityAndAddress);
                    $("#ip1").val(ip);
                    $("#cy1").val(cityAndAddress);
                }
            });
        });

        <!--异步登录-->
        //在登录表单之前，需要进行表单的合法性验证
        function adminLogin() {
            var data = $("#loginForm").serialize();
            $.ajax({
               url:"admin_login",
               data:data,
                dataType:"json",
                type:"post",
                success:function (result) {
//                    alert(JSON.stringify(result));
                    if(result.code==200){
                        //走通用的页面跳转方法
                        location.href="page_index";
                    }else if(result.code==303){
                        alert(result.message);
                        window.location.reload();
                    }else{
                        alert("账号或密码错误");
                        //刷新一下
                        window.location.reload();
                    }
                }
            });
        }
    </script>
</head>
<body class="layui-bg-black">
<div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login">
    <form action="admin_login" method="post" id="loginForm">
        <h1>
            <strong>易购商城运营商管理后台</strong> <em></em>
        </h1>
        <div class="layui-user-icon larry-login">
            <input type="text" placeholder="账号" class="login_txtbx" name="username"/>
        </div>
        <div class="layui-pwd-icon larry-login">
            <input type="password" placeholder="密码" name="password" class="login_txtbx" />
        </div>
        <input type="hidden" name="ip" id="ip1">
        <input type="hidden" name="city" id="cy1">
        <div class="feri-code">
            <div id="mpanel4"></div>
        </div>
        <div class="layui-submit larry-login">
            <input type="button" id="btn1"  onclick="adminLogin();" disabled="disabled" value="立即登陆" class="submit_btn" />
        </div>
    </form>
    <div class="layui-login-text">
        <p>© 2016-2018 北京易购科技有限公司 版权所有</p>
    </div>
</div>
<script type="text/javascript" src="media/js/login.js"></script>
<script type="application/javascript" src="media/js/verify.min.js"></script>
<script type="text/javascript">
    $(function() {
        //滑动验证码
        $('#mpanel4').pointsVerify({
            defaultNum : 6, //默认的文字数量
            checkNum : 1, //校对的文字数量
            vSpace : 5, //间隔
            imgName : [ '1.jpg', '2.jpg' ],
            imgSize : {
                width : '400px',
                height : '200px',
            },
            barSize : {
                width : '400px',
                height : '40px',
            },
            ready : function() {
            },
            success : function() {
                //......后续操作
                $("#btn1").attr("disabled", false);
            },
            error : function() {
            }
        });
    });
</script>
</body>
</html>